<template>
    <v-layout type="main">
        <el-form ref="form" :model="addForm" :rules="submitRules" label-width="120px" class="alick-add-form">
            <div v-if="algorithm_id == null">
                <h3 class="add-alike-title">基本信息</h3>
                <el-form-item label="名称" prop="name">
                    <el-input type="text" v-model="addForm.name" />
                </el-form-item>
                <el-form-item label="配图">
                    <media-uploader accept=".jpg,.jpeg,.png,.JPG,.JPEG" :src="addForm.avatar"
                        @avatarPath="avatarPath" />
                </el-form-item>
                <el-form-item label="描述" prop="desc">
                    <el-input type="textarea" :rows="3" v-model="addForm.desc" />
                </el-form-item>
            </div>
            <div v-else>
                <h3 class="add-alike-title">基本信息</h3>
                <el-form-item label="名称" prop="name">
                    {{ addForm.name }} 
                    <a href="javascript:;" class="start" @click="preAddAlgorithm">新增公开算法</a>
                </el-form-item>
            </div>
            <h3 class="add-alike-title">版本信息</h3>
            <el-form-item label="版本" prop="version">
                <el-input type="text" v-model="addForm.version" readonly />
            </el-form-item>
            <el-form-item label="提交信息" prop="commit_msg">
                <el-input type="textarea" :rows="3" v-model="addForm.commit_msg" />
            </el-form-item>
            <h3 class="add-alike-title">仿真环境配置</h3>
            <el-form-item label="仿真环境">
                <el-select  v-model="simulation.image_id" @change="changeSimulationImage()"
                    prop="simulation_image_id" class="full-extent-select">
                    <el-option v-for="item in simulationImageOptions" :value="item.id" :label="item.name"
                        :key="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="想定">
                <el-select  value-key="id" v-model="scenario" @change="changeScenario(scenario)"
                    prop="scenario_id" class="full-extent-select">
                    <el-option v-for="item in scenarioOptions" :value="item" :label="item.name" :key="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="数量">
                <el-input-number  v-model="simulation.pod_num"></el-input-number>
            </el-form-item>
            <h3 class="add-alike-title">开发环境配置</h3>
            <div class="node-module">
                <h3 class="node-module-title">主节点</h3>
                <el-form-item label="环境" prop="mainNodeImageId">
                    <el-cascader v-model="mainNode.image_group" :options="imageOptions"
                        :show-all-levels="false" class="full-extent-select"></el-cascader>
                </el-form-item>
                <el-form-item label="资源组" prop="mainProduct">
                    <el-select  v-model="mainNode.product_id" prop="main_product" class="full-extent-select">
                        <el-option v-for="item in productOptions" :value="item.id" :label="item.name" :key="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <div class="right-btn-box" v-if="slaveNodeList.length == 0">
                    <span class="outin-handle">
                        <a href="javascript:;" @click="addSlaveNode()">增加</a>
                    </span>
                </div>
            </div>
            <div v-for="(tag, i) in slaveNodeList" :key="i">
                <div class="node-module">
                    <h3 class="node-module-title">从节点</h3>

                    <el-form-item label="环境" prop="slaveImage">
                        <el-cascader v-model="tag.image_group" :options="imageOptions"
                            :show-all-levels="false"  class="full-extent-select"></el-cascader>
                    </el-form-item>
                    <el-form-item label="资源组">
                        <el-select v-model="tag.product_id" class="full-extent-select">
                            <el-option v-for="item in productOptions" :value="item.id" :label="item.name"
                                :key="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="数量">
                        <el-input-number  v-model="tag.pod_num"></el-input-number>
                    </el-form-item>
                    <div class="right-btn-box">
                        <span class="outin-handle">
                            <a href="javascript:;" @click="delSlaveNode(i)">删除</a>
                            <a href="javascript:;" @click="addSlaveNode()" v-if="i == slaveNodeList.length - 1">增加</a>
                        </span>
                    </div>
                </div>
            </div>
            <el-form-item label=" ">
                <el-button class="none-type" type="primary" @click="submit" v-if="active == 1">确定</el-button>
            </el-form-item>

        </el-form>
        <el-form class="form myself-form">
            <el-dialog :visible.sync="showDialog" title="发布成功" width="440px">
                <h1 class="succeed-hint">发布成功</h1>
                <div class="succeed-btn">
                    <a href="javascript:;" class="start" @click="back">返回</a>
                    <a href="javascript:;" class="go" @click="toDetail">立即前往</a>
                </div>
            </el-dialog>
        </el-form>

    </v-layout>
</template>
  
<script>
import { addMarketAlgorithmVersion, getAuditMarketAlgorithmVersions } from '@/api/marketAlgorithmVersion'
import { getMarketAlgorithmDetail, addMarketAlgorithm } from '@/api/marketAlgorithm'
import { getGameExperimentDetail } from '@/api/gameExperiment'
import { getAllImages, getImageDetail, getAllImageGroups } from '@/api/image'
import { getAllProducts } from '@/api/product'
import { getAllScenarios, getScenarioCommand } from '@/api/scenario'
export default {
    data() {
        return {
            active: 1,
            addForm: { file_source: 1, type: 2 },
            algorithm: {},
            submitRules: {
                name: [
                    { required: true, message: "该项为必填项" },
                    { required: true, min: 1, max: 200, message: "长度在1到40个字符" },
                ],
                desc: [
                    { required: true, message: "该项为必填项" },
                    { required: true, min: 1, max: 200, message: "长度在1到200个字符" },
                ],
            },
            id: this.$route.query.id,
            showDialog: false,
            simulation: { pod_num: 1 },
            mainNode: { visibility: '2', engine: '2', pod_num: 1, type: 0, imageOptions: [], image_id: null },
            slaveNodeList: [],
            simulation_deduction_list: [],
            simulation_port_list: [{ protocol: 2 }],
            imageOptions: [],
            productOptions: [],
            scenarioOptions: [],
            simulationImageOptions: [],
            modelOptions: [],
            modelVersionOptions: [],
            scenario: null,
            algorithm_id: this.$route.query.algorithm_id,
            experiment_id: this.$route.query.experiment_id,

        };
    },
    async created() {
        this.getDetail()
        this.getAllImageGroups()
        this.getProductList()
        this.getSimulationImage()
    },
    mounted() { },
    destroyed() { },
    methods: {
        async getDetail() {
            let res = await getGameExperimentDetail({ id: this.experiment_id });
            this.getAddForm(res.data)
            this.addForm.status = null
            this.addForm.version = "v1"
            this.addForm.type = this.type
            this.addForm.source = this.algorithm_id
            if (this.algorithm_id) {
                let res = await getMarketAlgorithmDetail({ id: this.algorithm_id })
                this.addForm.version = 'v' + (res.data.version_index + 1)
                this.addForm.algorithm_id = this.algorithm_id
            }
        },
        async setAddForm() {
            console.log('this.simulation', this.simulation)
            this.addForm.type = 2 //强化学习
            this.addForm.node_group_list = []
            this.mainNode.type = 1
            this.mainNode.image_id = this.mainNode.image_group[2]
            this.addForm.node_group_list.push(this.mainNode)
            for (let i = 0; i < this.slaveNodeList.length; i++) {
                this.slaveNodeList[i].type = 2
                this.slaveNodeList[i].image_id = this.slaveNodeList[i].image_group[2]
                this.addForm.node_group_list.push(this.slaveNodeList[i])
            }
            console.log(this.addForm.node_group_list)
            this.addForm.simulation_port_list = this.simulation_port_list
            this.addForm.simulation_deduction_list = this.simulation_deduction_list
            this.addForm.simulation_node_group = this.simulation
            this.addForm.simulation_node_group.image_id = this.simulation.image_id
            if (this.scenario) {
                this.addForm.scenario_id = this.scenario.id
            }
            this.addForm.business_id = this.experiment_id
            this.addForm.business_type = 6
            console.log('addForm', this.addForm)
        },
        preAddAlgorithm(){
            this.algorithm_id = null
            this.addForm.version = "v1"
        },
        onInput() {
            this.$forceUpdate();
        },
        async getAddForm(data) {
            this.addForm = data
            this.port_list = []
            this.slaveNodeList = []
            for (let node of data.node_group_list) {
                if (node.type == 1) {
                    this.mainNode = node
                    let res = await getImageDetail({ id: this.mainNode.image_id })
                    let mainImage = res.data
                    this.mainNode.image_group = [mainImage.visibility.toString(), mainImage.engine.toString(), mainImage.id]
                } else {
                    let res = await getImageDetail({ id: node.image_id })
                    let slaveImage = res.data
                    let slaveNode = node
                    slaveNode.image_group = [slaveImage.visibility.toString(), slaveImage.engine.toString(), slaveImage.id]
                    this.slaveNodeList.push(slaveNode)
                }
            }
            this.simulation = this.addForm.simulation_node_group
            if (!this.simulation) {
                this.simulation = { pod_num: 1 }
            }
            this.simulation_deduction_list = data.simulation_deduction_list
            this.scenario = this.addForm.scenario
            console.log('simulation', this.simulation)
            this.changeSimulationImage()
            this.changeScenario(this.scenario)
            this.simulation_port_list = data.simulation_port_list
        },
        async getAllImageGroups() {
            let res = await getAllImageGroups()
            this.imageOptions = res.data
        },
        async getProductList() {
            let res = await getAllProducts()
            this.productOptions = res.data
        },
        async getSimulationImage() {
            let ret = await getAllImages({ visibility: '1', type: 3 })
            this.simulationImageOptions = ret.data
        },
        async changeSimulationImage() {
            if (this.simulation) {
                let ret = await getAllScenarios({ imageId: this.simulation.image_id })
                console.log('ret', ret.data)
                this.scenarioOptions = ret.data
                let simulationCommand = this.simulation.command;
                if (this.simulation.image_id) {
                    let res = await getImageDetail({ id: this.simulation.image_id })
                    let image = res.data
                    this.simulation_port_list = image.port_list
                    this.simulation.product_id = image.product_id
                    this.simulation.command = image.command
                }
                if (simulationCommand != null) {
                    this.simulation.command = simulationCommand
                }
            }
        },
        async changeScenario(scenario) {
            if (scenario) {
                console.log(scenario)
                this.scenario = scenario
                if (this.simulation_deduction_list == null) {
                    this.simulation_deduction_list = []
                }
                if (this.simulation_deduction_list.length == 0) {
                    for (let deduction of scenario.deduction_list) {
                        let data = {
                            name: deduction.name,
                            deduction_id: deduction.id,
                        }
                        this.simulation_deduction_list.push(data)
                    }
                } else {
                    for (let sd of this.simulation_deduction_list) {
                        for (let deduction of scenario.deduction_list) {
                            if (sd.deduction_id == deduction.id) {
                                sd.name = deduction.name
                            }
                        }
                    }
                }
                let cmdRes = await getScenarioCommand({ id: this.scenario.id })
                console.log(">>>>>>>>>>>>>>>>>cmdRes", cmdRes)
                if (cmdRes && cmdRes.data) {
                    this.simulation.command = cmdRes.data;
                    this.$forceUpdate()
                }

            }
        },
        /**
         * 提交
         */
        submit() {
            console.log(this.addForm)
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    this.setAddForm()
                    if (this.algorithm_id) {
                        await addMarketAlgorithmVersion({ ...this.addForm });
                    } else {
                        let ret = await addMarketAlgorithm({ ...this.addForm });
                        this.addForm = ret.data
                    }
                    this.showDialog = true
                }
            })
        },
        addSlaveNode() {
            this.slaveNodeList.push({ visibility: '2', engine: '2', type: 1, imageOptions: [], pod_num: 1 })
        },
        delSlaveNode(i) {
            this.slaveNodeList.splice(i, 1)
        },
        back() {
            this.$router.back()
            this.showDialog = false
        },
        async toDetail() {
            console.log("algorithm_id", this.algorithm_id)
            let ret = await getAuditMarketAlgorithmVersions({ algorithmId: this.algorithm_id })
            let version = ret.data[0]
            this.showDialog = false
            let query = {
                id: this.addForm.id,
                version_id: version.id,
                active: 1
            }
            this.$router.push({
                path: 'my_algorithm/code?',
                query
            })
        },
        done() {
            this.toDetail()
        },

        succeedOver(data) {
            console.log(data)
        },
        avatarPath(data) {
            this.addForm.avatar = data;
        },
    },
};
</script>
<style lang="less" scoped>
@import "~@/assets/css/detail-add.less";
</style>